After long time, I like to write an article on JavaScript compatibility on different browsers. In this article I am creating a context menu on mouse right click. As we know we can easily create the context menu using javascript, but the main problem is the browser compatibility with this context menu. I am here giving some code to create a context menu. You can use this in any browser. I tested it in Internet Explorer 6.0, Firefox Mozilla 2.0 and Safari 3.0. It’s working fine.
Copy and paste the following code in notepad and save it as TestContextMenu.html and test it.
=============================================================
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>¦¦-Browser Compatible Context Menu-¦¦</TITLE>
<META NAME=’Generator’ CONTENT=’Javascript Context Menu’>
<META NAME=’Author’ CONTENT=’Context Menu on Mouse Right Click’>
<META NAME=’Keywords’ CONTENT=’Browser compatible context menu’>
<META NAME=’Description’ CONTENT=’Internet Explorer IE, FireFox, Safari compatible context menu’>
<style>
<!–
.skin0
{
position:absolute;
width:165px;
border:2px solid black;
background-color:#eeddee;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
}
.menuitems
{
padding-left:10px;
padding-right:10px;
}
–>
</style>
<script language=javascript>
//Following function will fired when we click on the right click menu option.
function getSelText(obj)
{
menuobj.style.visibility=’hidden’
alert(obj);
}
</script>
</HEAD>
<BODY><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<CENTER>
<P><B>
<H2>Right Click on the document and select an option from the context menu. <BR>This example is tested in Internet Explorer 6.0, Mozila Firefox 2.0 and Safari 3.0. Its working fine in all these browser.<B> </H2><BR><H1>Hurrey…..</H1>
</P></CENTER>
<div id=’ie5menu’ class=’skin0′ onMouseover=’highlightie5(event)’ onMouseout=’lowlightie5(event)’ onClick=’jumptoie5(event)’ display:none>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘Copy’);>Copy</div>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘Cut’);>Cut</div>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘Paste’);>Paste</div>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘New’);>New</div>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘Edit’);>Edit</div>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘Submit’);>Submit</div>
</div>
<script language=’JavaScript1.2′>
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var menuobj=document.getElementById(‘ie5menu’)
function showmenuie5(e)
{
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY
//if the horizontal distance isn’t enough to accomodate the width of the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it’s width
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY
menuobj.style.visibility=’visible’
return false
}
function hidemenuie5(e)
{
menuobj.style.visibility=’hidden’
}
function highlightie5(e)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className==’menuitems’||ns6&&firingobj.parentNode.className==’menuitems’)
{
if (ns6&&firingobj.parentNode.className==’menuitems’) firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor=’#00AAff’
firingobj.style.color=’white’
if (display_url==1)
window.status=event.srcElement.url
}
}
function lowlightie5(e)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className==’menuitems’||ns6&&firingobj.parentNode.className==’menuitems’)
{
if (ns6&&firingobj.parentNode.className==’menuitems’)
{
firingobj=firingobj.parentNode;
}
firingobj.style.backgroundColor=” ;
firingobj.style.color=’black’ ;
window.status=”;
}
}
function jumptoie5(e)
{
var firingobj=ie5? event.srcElement : e.target;
if (firingobj.className==’menuitems’||ns6&&firingobj.parentNode.className==’menuitems’)
{
if (ns6&&firingobj.parentNode.className==’menuitems’) firingobj=firingobj.parentNode;
if (firingobj.getAttribute(‘target’))
window.open(firingobj.getAttribute(‘url’),firingobj.getAttribute(‘target’));
else
window.location=firingobj.getAttribute(‘url’);
}
}
if (ie5||ns6)
{
menuobj.style.display=”;
document.oncontextmenu=showmenuie5 ;
document.onclick=hidemenuie5;
}
</script>
</BODY>
</HTML>
==============================================================
Note: I came to know from some comments that the Code is not working. I here note that the code was not working due to the problem with ” character. I don’t know but it was encrypted. I retype the code here and think that it will work. Let me know if you found any problem. Thank you…
Enjoy this……
Reference: http://www.dynamicdrive.com
Vijay Modi 
adfasdfasdfasdf asdfasdf
y the code after copy still cant be used? i cant run in my browser.
i copied and pasted this into notepad and attempt to run.
works in neither IE or Firefox.
This sucks, it doesn’t work. Some programmer huh..
Hi friends I came to find that when I am publishing this article the ‘ (Quotes) are replaced with ’ (Encoding) character. And due to this the code is not working. Please copy & Paste the code and replace th ’ with the ‘(Quote). It will work.
It still sucks
Manoj,
Please update the ’ charactor with ‘ . It will resolve your problem.
Wow this is not working. At all.
Where is the code that make other browsers than ie5/ie6 listen for right click?
Please re-paste the code in some quote tags or something, that doesnt destroy it…
Lol. 😦
hi, I copied this code and replaced ’ with ’
and tried to open the file in ie
I showed hurray u can now right click the document…..
when I right click it shows only the usual context menu which appears in the IE is displayed.
Please help me out in create a context menu…It’s mandatory for my project.
It works you with a bit of tweaking
you need to fix the ‘ ” with their correct characters and at two point there is a ” when it should be two ‘ . i will post the workin code at http://julusian.freehostia.com/rclick.htm
Thanks. Its working. Can I get your email id. I need a little help regarding my project. Hope you will help me.
sure….I am sending an Email from my mailID.
Actually I am creating a plug-in which does the functionality of security. I need to check the browser security, validate the user, validate the web site whether malicious or not. For checking malicious or not I need the context. For checking the browser security there are some web sites which does that. But I need to do that with my plug-in. Can you help me with checking the browser security
Hi, your code for context menu working perfectly,but problem is:
i have used editable panel.
all code works correct for contrext menu.
but when i type long msg & when verticle scroll acivate, when i right click on any word the popup comes but cursor goes to last.and msg scroll down.
i.e when i rgt click at first line the cursor should not go last.
Hi, your code for context menu working perfectly,but problem is:
i have used editable panel.
all code works correct for contrext menu.
but when i type long msg & when verticle scroll acivate, when i right click on any word the popup comes but cursor goes to last.and msg scroll down.
i.e when i rgt click at first line the cursor should not go last.
for all the people who say this sucks, go write your own code, right? you ain’t payin this guy anything, he does not owe ya nothing…if it dun work, deal with it…it atleast gives ya pointers to what should be done…and all yas lot had to do was change some characters…for the pathets who can’t even do that…yup, u r precisely the ryt sorta ppl to judje a programmers worth…
and no, i wasn’t lookin to copy-paste some code, i am tryin to find a work-round ff showin the default context menu when the right click event is triggered…(along with doin what im tellin it to do)
Man… i know one can do a good job and still cant get appriciated enough.. because some A’holes take the shortcut, but come on, put a damn demo page, paste the bloody code and then give the code example!
This is the only way any code is presented, if you are smart, you’ll take the hint..
And for the guys who says this sucks.. take a look at the mirror first to see who sucks, before you go and trashing this guy doing his best, at least this guy does something not code copying..
The “–” characters in the JavaScript comment are being replaced with Unicode. The the two single quotes (to set nothing) is being replaced with a single double quote, which requires fixing in several places. The double quotes are being set to 66 and 99 characters, and the single quotes are 6 and 9s. After a bit of search/replace and test… it all works a treat. Even in IE8 without compatibility mode.
Thanks. I do second the “demo page” idea though. Would make it a lot easier.
amazing! great work dude!
Hello from America! This is a terrific post and that I enjoyed studying it